iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

Be friend with JavaScript系列 第 14

Day 14 - Arrow Function Expression & this

  • 分享至 

  • xImage
  •  

this

在 JavaScript 裡,this 指向 window,在 function 中, this 指向呼叫它的地方。
例如:

// Window
window.name = "Amy";
console.log(this.name); // Amy
console.log(this); // Window Object
// Object
let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.sayAge(); // I am 24 years old.

在 sayAge() 裡面的 this 取決於呼叫它的地方,sayAge() 是在 Helen 這個 object 裡被定義的,所以 this 就代表這個 object,this.age 就會是 24。
this 也能改變物件的值,例如:

let Helen = {
    age:24,
    sayAge(){
        console.log("I am " + this.age + " years old.")
    }
};
Helen.age = 25;
Helen.sayAge(); // I am 25 years old.

Arrow Function Expression

箭頭函式語法簡單,和傳統函式比,可以少打很多字,也讓程式碼較好閱讀,在箭頭函式中,沒有自己的 this,所以箭頭函式中的 this 永遠指向函式被定義時所在的作用域中的 this 值。
過去我們寫函式的方式如下:

function sayHi(){
    console.log("Hi");
}
sayHi(); // Hi

將上面例子改成箭頭函式:

const sayHi = () => {
    console.log("Hi")
}
sayHi(); // Hi
  • 如果函式有回傳值,要加上 return,且如果沒有參數,就一定要加括號,例如:
const sayHi = () => {
  return "Hi";
}
sayHi(); // Hi

上面的例子也可以簡化成下面這樣:

  • 省略 return 及 {},因為當沒有 {} 時,會自帶 return
const sayHi = () => "Hi";
sayHi(); // Hi
  • 如果函式只有一個參數時,() 可以省略
    原始程式碼:
let count = (x) => {
    console.log(x + 1)
}
count(3); // 4

參數省略 () 後:

let count = x => {
    console.log(x + 1)
}
count(3); // 4
  • 箭頭函式如果在定義 function 前就先執行會出錯
sayHi("Gina");
let sayHi = (name) => {
    console.log("Hi" + name)
}

執行上面的程式碼,會得到 Uncaught RefernceError 不能在定義前執行的錯誤提示


Bind,Call and Apply

下面的程式碼因為 this 指向 window,會回傳 undefined,這時我們就可以使用 bind,call or apply

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this.age); // undefined
}
getPerson();
  • bind
    使用 bind 時會回傳新的 function,所以需要用一個變數接住
let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson();
// Window Object
// undefined

// 使用 bind 綁定
let newfn = getPerson.bind(Helen);
newfn();
// {name:"Helen",age:24,}
// 24
  • call
    不會產生新的 function,可以直接使用
let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(){
  console.log(this);
  console.log(this.age);
}
getPerson.call(Helen);
// {name:"Helen",age:24,}
// 24

如果 function 內有參數,則直接在括號後面加上去

let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.call(Helen,"Taiwan","Female");
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female
  • apply
    和 call 非常類似,差別在於 apply 的參數要放在陣列裡
let Helen = {
  name:"Helen",
  age:24,
}
function getPerson(country,sex){
  console.log(this);
  console.log(this.age);
  console.log("I am from " + country + ".I am " +sex );
}
getPerson.apply(Helen,["Taiwan","Female"]);
// {name:"Helen",age:24,}
// 24
// I am from Taiwan.I am Female

上一篇
Day 13 - Spread Operator & Rest Operator
下一篇
Day 15 - Destructuring assignment
系列文
Be friend with JavaScript39
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言